<!--
 * @version: 
 * @Author: yu
 * @Date: 2023-07-01 20:58:46
 * @LastEditors: Andy
 * @LastEditTime: 2023-07-01 21:52:58
-->
<template>
    <div>
        <!--  opened Dialog 打开动画结束时的回调 -->
        <el-dialog @opened="opened" :title="info.title" :visible.sync="info.isShow" :before-close="close">
            <el-form :model="form" :rules="rules" ref="form1">

                <el-form-item label="标题" :label-width="formLabelWidth" prop="title">
                    <el-input v-model="form.title" autocomplete="off"></el-input>
                </el-form-item>

                <!-- on-preview	点击文件列表中已上传的文件时的钩子
                        on-remove	文件列表移除文件时的钩子
                        file-list 上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]
                        auto-upload  是否在选取文件后立即进行上传
                -->

                <el-form-item v-show="form.pid !== 0" label="图片" :label-width="formLabelWidth">
                    <el-upload action="#" list-type="picture-card" :on-change="change"
                        :on-preview="handlePictureCardPreview" :file-list="fileList" :auto-upload="false">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>


                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ccc" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button v-if="info.isAdd" type="primary" @click="confirm">确 定</el-button>
                <el-button v-else type="primary" @click="amend">修 改</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { bannerAdd, bannerInfo, bannerEdit } from '@/request/api'
import { successAlert } from '@/utils/alert'
import { mapActions } from 'vuex'
export default {
    data() {
        return {
            formLabelWidth: '120px',
            form: {
                title: '',  //轮播图名称
                img: '',   //图片(文件)
                status: 1  //状态  1正常2禁用
            },
            rules: {
                title: [
                    { required: true, message: '请输入标题', trigger: 'blur' },
                    { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
                ]
            },
            //图片上传
            dialogImageUrl: '', //预览图片地址
            dialogVisible: false, //图片预览是否展示
            fileList: []  // 图片的数据数组
        }
    },
    props: ['info'],
    methods: {

        ...mapActions({
            requestBanner: 'banner/listActions'
        }),
        amend() {
            bannerEdit(this.form).then(res => {
                // console.log(res);
                if (res.code === 200) {
                    //消息提示
                    successAlert(res.msg)
                    //取消弹窗
                    this.cancel()
                    //更新列表
                    this.requestBanner()
                }
            })
        },
        getDetail(id) {
            // console.log(id);
            bannerInfo({ id }).then(res => {
                // console.log(res);
                if (res.code === 200) {
                    this.form = res.list
                    this.form.id = id
                    this.fileList = this.form.img ? [{ url: 'http://localhost:3000' + this.form.img }] : []
                }
            })

        },
        close() {
            this.cancel()
        },
        cancel() {
            this.info.isShow = false
            this.form = {
                title: '',  //轮播图名称
                img: '',   //图片(文件)
                status: 1  //状态  1正常2禁用
            }
            //取消表单
            this.$refs.form1.resetFields()
            //重置照片
            this.fileList = []
        },
        confirm() {
            this.$refs.form1.validate((val) => {
                if (!val) {
                    return
                }
                // console.log(this.form);
                bannerAdd(this.form).then(res => {
                    // console.log(res);
                    if (res.code === 200) {
                        successAlert(res.msg)
                        this.cancel()
                        //更新列表
                        this.requestBanner()
                    }
                })
            })
        },
        opened() {
            this.requestBanner()
        },
        handlePictureCardPreview() {
            this.dialogVisible = true
        },
        change(file, fileList) {
            // console.log(file);
            this.dialogImageUrl = file.url  //取得图片得地址
            this.form.img = file.raw
        },

    },
    mounted() { },
    watch: {},
    computed: {},
    filters: {},
    components: {}
}
</script>
<style scoped></style>